<template>
	<!-- 功能按钮列表组件 -->
	<view class="base-btn-list" :style="{ '--btn-width': btnWidth + 'rpx', '--btn-margin-right': btnMarginRight + 'rpx', '--btn-margin-bottom': btnMarginBottom + 'rpx', '--icon-size': iconSize + 'rpx', '--icon-margin-bottom': iconMarginBottom + 'rpx', '--btn-txt-size': btnTxtSize + 'rpx', '--btn-txt-color': btnTxtColor }">
		<view
			class="btn-item"
			:class="(index + 1) % turningPoint === 0 ? 'mr' : ''"
			v-for="(item, index) in btnListData"
			:key="index"
			@click="handleClick(item)"
		>
			<image class="icon" :src="item.icon"></image>
			<view class="txt">{{ item.txt }}</view>
		</view>
	</view>
</template>

<script setup>
/** props-组件属性 */
const props = defineProps({
	// 按钮数据  
  btnListData: {
    type: Array,
		default: () => []
  },
	// 转行点
	turningPoint: {
		type: Number,
		default: 5
	},
	// 按钮宽度
	btnWidth: {
		type: Number,
		default: 96
	},
	// 按钮右边距
	btnMarginRight: {
		type: Number,
		default: 46
	},
	// 按钮下边距
	btnMarginBottom: {
		type: Number,
		default: 52
	},
	// icon宽度
	iconSize: {
		type: Number,
		default: 80
	},
	// icon和文字的边距
	iconMarginBottom: {
		type: Number,
		default: 10
	},
	// 按钮文字大小
	btnTxtSize: {
		type: Number,
		default: 24
	},
	// 按钮文字颜色
	btnTxtColor: {
		type: String,
		default: '#666666'
	},
});

/** emit-组件事件 */
const emit = defineEmits(['clickItem']);

function handleClick(item) {
	emit('clickItem', item);
}

</script>

<style>
.base-btn-list {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}

.btn-item {
	width: var(--btn-width);
	margin-right: var(--btn-margin-right);
	margin-bottom: var(--btn-margin-bottom);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.mr {
	margin-right: 0;
} 
		
.icon {
	width: var(--icon-size);
	height: var(--icon-size);
	display: block;
	margin-bottom:var(--icon-margin-bottom);
}

.txt {
	font-size: var(--btn-txt-size);
	color: var(--btn-txt-color);
	white-space: nowrap;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>